<template>
	<div class="blogClassified">
		 <div class="blogClassified-type">
             <ul class="clearfix">
                <li v-for ="item in options" :value ="item.value">
                   <router-link :to="{path:'blogType/blogTypeList', query:{id:item.value}}">
	                 <p><img :src="item.img"></p>
	                 <span>{{item.name}}</span>
	               </router-link>
                </li> 
             </ul>
		 </div>

		 <blogContentRight></blogContentRight>  
	</div>
    

</template>
<style scoped>
  .blogClassified{
  	  width: 1120px;
	    margin: 20px auto;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    padding-top: 120px;
  }
  .blogClassified-type{
       width: 70%;
       background: white;
  } 
  .blogClassified-type ul li{
      width: 30%;
      margin-left: 2.6%;
      float: left;
      list-style-type: none;
      padding: 20px 0;
      cursor: pointer;
  }
  .clearfix:after {   
    content: " ";   
    display: block;   
    clear: both;  
    visibility: hidden;    
    height: 0;     
    font-size:0;  
}
.blogClassified-type ul li img{
    width: 100%;
    transition: all 0.4s ease
}
.blogClassified-type ul li img:hover{
  	transform: scale(1.1);
}
.blogClassified-type ul li span{
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    display: block;
    color: #555
}
</style>
<script>
  import blogContentRight from './blogContentRight'
  import img from '../assets/images/qd.jpg'

  export default {
    name: 'App',
    data () {
        return {
            options:[
                {
                  "name": "前端",
                  "value" : 1,
                  "img":img
                },
                {
                  "name": "后台",
                  "value" : 2,
                  "img":img
                },
                {
                  "name": "设计",
                  "value" : 3,
                  "img":img
                },
                {
                  "name": "生活",
                  "value" : 4,
                  "img":img
                },
                {
                  "name": "艺术",
                  "value" : 5,
                  "img":img
                },
                
            ]
        }
    },
   
    components: {
       blogContentRight: blogContentRight
    }
  }
</script>
